/** lib **/
import { ref, onMounted, computed } from 'vue'

import { useStore } from 'vuex'

import { throttle } from '../../../assets/ts/util'

export default () => {
  // useStore
  const store = useStore()
  // windowWidth
  const windowWidth = ref()
  // navStyle
  const navStyle = computed(() => {
    if (windowWidth.value <= 768) {
      return {
        'background-color': store.state.primaryColor,
      }
    }
    return {}
  })

  // onMounted Hooks
  onMounted(() => {
    windowWidth.value = document.body.clientWidth
    window.onresize = throttle((e: any) => {
      windowWidth.value = document.body.clientWidth
    }, 200)
  })
  // @returns
  return {
    windowWidth,
    navStyle,
  }
}
